<template>
  <div class="item">
    <div class="imgBox">
      <router-link
        :to="{
          path: `/artistsSongList/${item.id}?url=${item.picUrl}&name=${item.name}`
        }"
      >
        <!-- <img :src="item.picUrl" /> -->
        <lazy-component>
          <img v-lazy="item.picUrl" />
        </lazy-component>
      </router-link>
    </div>
    <router-link
      :to="{
        path: `/artistsSongList/${item.id}?url=${item.picUrl}&name=${item.name}`
      }"
      >{{ item.name }}</router-link
    >
  </div>
</template>

<script>
export default {
  name: "ArtistsList",
  props: ["item"]
};
</script>

<style lang="less" scoped>
div.item {
  display: flex;
  flex-direction: column;
  .imgBox {
    img {
      width: 30vw;
      height: auto;
    }
  }
}

a {
  display: inline-block;
  width: 100%;
  font-size: 13px;
  text-decoration: none;
  padding: 0px 0px 10px 10px;
  text-align: center;
  cursor: pointer;
}
</style>
